<template>
    <div class="container">
      <!-- 左侧目录 -->
      <div class="directory-sidebar">
        <h1>项目目录</h1>
        <ul>
          <li v-for="item in menuItems" :key="item.name">
            <button @click="showContent(item.component)">{{ item.name }}</button>
          </li>
        </ul>
      </div>
      <!-- 右侧内容区域 -->
      <div class="content-area">
        <component :is="currentComponent" />
      </div>
    </div>
  </template>
  
  <script>
  import BingTu from '../components/bingtu.vue';
  import Box from '../components/box.vue';
  import Mapp from '../components/mapp.vue';
  import Place from '../components/place.vue';
  import XiaoShou from '../components/xiaoshou.vue';
  import Xuqiu from '../components/xuqiu.vue';
  import ZhuZhuangtu from '../components/zhuzhuangtu.vue';
  import ModuleMain from './ModuleMain.vue';
  
  export default {
    name: 'Directory',
    components: {
      BingTu,
      Box,
      Mapp,
      Place,
      XiaoShou,
      Xuqiu,
      ZhuZhuangtu,
      ModuleMain
    },
    data() {
      return {
        menuItems: [
          { name: '不同价格需求量柱状图', component: 'ZhuZhuangtu' },
          { name: '线上线下产品需求量箱线图', component: 'Box' },
          { name: '不同价格所占销售量的百分比', component: 'BingTu' },
          { name: '各地区需求量分布地图', component: 'Mapp' },
          { name: '年份需求量折线图', component: 'Xuqiu' },
          { name: '不同产品销售大类需求量柱状图', component: 'XiaoShou' },
          { name: '各地区分布占比图', component: 'Place' },
          { name: '总览图', component: 'ModuleMain' }
        ],
        currentComponent: 'ModuleMain'
      };
    },
    methods: {
      showContent(componentName) {
        if (componentName === 'ModuleMain') {
          // 当点击“总览图”时，导航到 home 页面
          this.$router.push({ name: 'Home' });
        } else {
          this.currentComponent = componentName;
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .container {
    display: flex;
    height: 100vh; /* 使容器占满整个视口高度 */
  }
  
  .directory-sidebar {
    width: 35%; /* 宽度占页面的35% */
    height: 100%; /* 高度占满整个容器 */
    background-color: #678497;
    padding: 20px;
    box-sizing: border-box; /* 包含内边距和边框在内计算元素的总宽度和高度 */
    overflow-y: auto; /* 如果内容超出容器高度，则显示滚动条 */
  }
  
  .content-area {
    width: 65%; /* 宽度占页面的65% */
    height: 100%; /* 高度占满整个容器 */
    padding: 40px;
    box-sizing: border-box; /* 包含内边距和边框在内计算元素的总宽度和高度 */
    background-color: #445763;
  }
  
  h1 {
    text-align: center;
    color: #333;
    font-size: 60px;
  }
  
  ul {
    list-style-type: none;
    padding: 0;
    font-size: 35px;
  }
  
  li {
    margin-bottom: 10px;
    background-color: #8BB2CC;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    width: 95%; /* 让列表项占满父容器宽度，便于后续更好地居中里面的按钮 */
    display: flex; /* 将列表项设为flex布局，方便让按钮在其内部居中 */
    justify-content: center; /* 水平方向让按钮居中 */
    align-items: center;
  }
  
  router-link {
    text-decoration: none;
    color: #007bff;
    display: block;
    width: 100%; /* 使链接占满整个列表项 */
    box-sizing: border-box; /* 包含内边距和边框在内计算元素的总宽度 */
    text-align: center; /* 文本居中 */
  }
  button {
    border: none; /* 去掉按钮边框 */
    font-family: "微软雅黑";
    font-size: 24px;
    background-color: #8BB2CC;
    text-align: center; /* 新增这行代码，设置按钮字体大小，可以根据需求调整具体数值 */
  }
  router-link {
    text-decoration: none;
    color: #007bff;
    display: block;
    width: 100%; /* 使链接占满整个列表项 */
    box-sizing: border-box; /* 包含内边距和边框在内计算元素的总宽度 */
    text-align: center; /* 文本居中 */
  }
  router-link:hover {
    text-decoration: underline;
  }
  </style>